<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-11-03 17:46:23
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-11-05 10:46:11
-->
<template>
  <div class="section-view">
    <div class="section-view__body" />
    <div class="body-line">
      <el-card class="bar-card">
        <div slot="header" class="clearfix">
          <span>总数据</span>
        </div>
        <div
          id="total"
          class="car-body"
        />
      </el-card>
      <el-card class="bar-card">
        <div slot="header" class="clearfix">
          <span>国籍占比</span>
        </div>
        <div
          id="nationality"
          class="car-body"
        />
      </el-card>
      <el-card class="bar-card">
        <div slot="header" class="clearfix">
          <span>用户趋势</span>
        </div>
        <div
          id="ranking"
          class="car-body"
        />
      </el-card>
    </div>
    <div class="body-line">
      <el-card class="bar-card" style="flex:1">
        <div slot="header" class="clearfix">
          <span>发帖排行榜</span>
        </div>
        <div
          id="accounts"
          class="car-body"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: '',
  components: {
  },
  props: {},
  data() {
    return {
      chartLists: [],
      total: {
        accountNum: 0
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.initTotal()
    this.initNationality()
    this.initAccounts()
    this.initRank()
    window.onresize = this.chartsResize
  },
  beforeDestroy() {
    clearInterval(this.wsTimer)
    window.onresize = null
  },
  methods: {
    initTotal() {
      this.$http.get('/index/data/total').then((res) => {
        if (res.success) {
          console.log(this.chartLists)
          this.total = res.data
          const myChart = echarts.init(document.getElementById('total'))
          const option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '总数据',
                type: 'pie',
                center: ['50%', '60%'],
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: res.data.accountNum || 0, name: '总用户' },
                  { value: res.data.postNum || 0, name: '总帖数' }
                ]
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
          this.chartLists.push(myChart)
        }
      })
    },
    initNationality() {
      this.$http.get('/index/nationality/rat').then((res) => {
        if (res.success) {
          this.total = res.data
          const data = res.data.map((v) => {
            return {
              value: v.num,
              name: v.nationality
            }
          })
          const myChart = echarts.init(document.getElementById('nationality'))
          const option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '总数据',
                type: 'pie',
                center: ['50%', '60%'],
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
          this.chartLists.push(myChart)
        }
      })
    },
    initAccounts() {
      this.$http.get('/index/add/accounts').then((res) => {
        if (res.success) {
          this.total = res.data
          const data = []
          const data1 = res.data.map((v) => {
            data.push(v.num)
            return v.createTime
          })
          const myChart = echarts.init(document.getElementById('accounts'))
          const option = {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: data1
            },
            yAxis: {
              type: 'value'
            },
            grid: {
              left: '4%',
              right: '4%',
              bottom: '4%',
              top: '4%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis'
            },
            series: [{
              data: data,
              type: 'line',
              areaStyle: {}
            }]
          }
          myChart.clear()
          myChart.setOption(option)
          this.chartLists.push(myChart)
        }
      })
    },
    initRank() {
      this.$http.get('/index/account/ranking').then((res) => {
        if (res.success) {
          this.total = res.data
          const data = []
          const data1 = res.data.map((v) => {
            data.push(v.num || 0)
            return v.name
          })
          const myChart = echarts.init(document.getElementById('ranking'))
          const option = {
            xAxis: {
              type: 'category',
              data: data1
            },
            tooltip: {
              trigger: 'axis'
            },
            yAxis: {
              type: 'value'
            },
            grid: {
              left: '4%',
              right: '4%',
              bottom: '4%',
              top: '4%',
              containLabel: true
            },
            series: [{
              data: data,
              type: 'bar'
            }]
          }
          myChart.clear()
          myChart.setOption(option)
          this.chartLists.push(myChart)
        }
      })
    },
    chartsResize() {
      this.chartLists &&
        this.chartLists.forEach(v => {
          v.resize()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.section-view {
  box-shadow: none;
  background: none;
  margin: 0;
  padding: 0 15px;
}
.body-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  .bar-card {
    width: 32%;
  }
  .total-card {
    width: 32%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    .flex-s {
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border: 1px solid #EBEEF5;
      padding: 15px;
    }
  }
  .car-body {
    height: 240px;
  }
  .icon {
    font-size: 40px;
    color: rgb(64, 158, 255);
  }
  .card-panel-num {
    font-size: 20px;
  }
  .flex-s {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-body__title {
    display: inline-block;
    margin-bottom: 6px;
  }
}
#accounts {
  height: 380px;
}
</style>
